<template>
  <div style="display: flex;padding-left: 2px;">
    <div :style="{height: height+'px'}" style="overflow:auto;">
      <div  style="width: 80px;background-color:#fff;height:calc(100vh - 130px);">
        <div
            style="text-align:center;padding: 12px 0;font-size:14px;"
            :class="[state.goodCatId===null?'active':'']"
            @click="choseCat(null)">
          <div class="line">
            全部
          </div>
        </div>
        <div
            style="text-align:center;padding: 12px 0;font-size:14px;"
            :class="[state.goodCatId==='near'?'active':'']"
            @click="choseCat('near')">
          <div class="line">
            最近购买
          </div>
        </div>
        <div
            style="text-align:center;padding: 12px 0;font-size:14px;"
            :class="[state.goodCatId===item.id?'active':'']"
            v-for="(item,index) in state.catList" :key="index" @click="choseCat(item.id)"
        >
          <div class="line">
            {{item.name}}
          </div>
        </div>
      </div>
    </div>
    <div  style="flex:1;padding-right: 5px;overflow:auto;" :style="{height: height+'px'}"  >
      <fresh-load @action="action" :url="url">
        <div class="item" v-for="(item,index) in state.list" :key="index" @click="altGood(item)">
          <div class="name">{{ item.name }}</div>
          <div class="link">
            <div style="flex:1;">规格：1 * {{ item.spec }}</div>
            <div  style="flex:1;">单位：{{ item.unit1 }}</div>
            <div  style="flex:1;">
              库存：{{item.leftQty}}
            </div>
          </div>
          <div style="display: flex;">
            <div class="address"  style="flex:1;">单价：
              <span style="color: #1e9fff;">{{ item.price }}</span>
              <span style="margin-left: 50px;font-size: 14px;color: #8a8f97;">
                 {{item.send}}
              </span>
            </div>
          </div>
        </div>
      </fresh-load>
    </div>
    <altgood :buId="props.buId" ref="addRef" @addSuc="addSuc" />
  </div>
</template>
<script setup>
import tool from "@/utils/tool";
import altgood from './altgood.vue'
import {computed, onActivated, onMounted, reactive, ref} from "vue";
import FreshLoad from "@/components/freshLoad.vue";
const props = defineProps({
  buId: {type: [Number, String], default: 0},
  buName: {type: [Number, String], default: ''},
  url: {type: [Number, String], default: ''},
})
const emit = defineEmits(['addSuc'])
const height = computed(() => {
  return window.innerHeight - 130
})
const addRef = ref(null)
onMounted(() => {
  getGoodCat()
})
const state = reactive({
  active: 0,
  list: [],
  goodCatId: null,
  catList: [],
  keyWord: '',
})
onActivated(() => {
  state.goodCatId = 'near'
})
const action = (arr) => {
   state.list = arr
}
const choseCat = (id) => {
  state.goodCatId = id
  state.list = []
  getList()
}
const getGoodCat = () => {
  tool.post('app/getGoodCat').then(ret => {
    if(ret.stat) {
      state.catList = ret.data
    }
  })
}
const scanRet = (code) => {
  if(code) {
    state.active = 0
    state.goodCatId = null
    this.currentPage = 1
    tool.post('app/getGoodByBar', {code: code}, true).then(ret => {
      this.currentPage = 1
      state.list = []
      state.list = ret.data.list
    })
  }
}
const search = (value, isQuick = false) => {
  state.active = 0
  state.goodCatId = null
  this.currentPage = 1
  this.value = value
  if(isQuick) state.list = []
  this.getList()
}
const getList = () => {
  tool.post('app/getGoodList',
      {
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        keyWord: this.value,
        goodCatId: state.goodCatId,
        buId: props.buId
      }, true).then(ret => {
    if(ret.stat) {
      if(state) {
        if(state.upRefresh) {
          state.upRefresh = false
          if(ret.data.list.length === 0) state.finished = true
          ret.data.list.map(row => {
            state.list.push(row)
          })
        }
        if(ret.data.list.length === 0) state.finished = true
        if(state.dropRefresh) {
          state.dropRefresh = false
          state.list = []
          ret.data.list.map(row => {
            state.list.push(row)
          })
        }
      }
      else {
        state.list = []
        ret.data.list.map(row => {
          state.list.push(row)
        })
        this.loading = false
        this.total = ret.data.total
        if(state.list.length < this.pageSize) this.finished = true
      }
    }
  })
}
const altGood = (goods) => {
  addRef.value.openDia(goods)
}
const addSuc = () => {
  emit('addSuc')
}


</script>
<style scoped lang="scss">
.active {
  background-color:rgba(0,0,0,0.05);
  .line {
    border-left:3px solid red;
  }
}
.item {
  margin:7px 5px 0 5px;
  background-color: white;
  padding: 10px;
  border-radius: 6px;
  &:active {
    background-color:rgba(0,0,0,0.05);
  }
  .name {
    font-size: 15px;
    font-weight: 500;
    color: #6b6d71;
  }
  .link {
    margin-top: 10px;
    font-size: 13px;
    font-weight: 400;
    color: #8a8f97;
    display: flex;
  }
  .address {
    margin-top: 10px;
    font-size: 14px;
    font-weight: 400;
    color: #6b6d71;
  }
  .send {
    padding-top: 5px;
    margin-left: 100px;
  }
}


</style>